<script setup lang="ts">
import { ref, watch, defineProps, defineEmits } from 'vue'

const props = defineProps<{ words: string[], modelValue: string[] }>()
const emit = defineEmits(['update:modelValue'])
const selected = ref<string[]>([...props.modelValue])

watch(() => props.modelValue, val => selected.value = [...val])

function toggle(word: string) {
  if (selected.value.includes(word)) {
    selected.value = selected.value.filter(w => w !== word)
  } else {
    selected.value.push(word)
  }
  emit('update:modelValue', selected.value)
}
</script>

<template>
  <div class="words-grid">
    <div
      v-for="word in words"
      :key="word"
      class="word-item"
      :class="{ selected: selected.includes(word) }"
      @click="toggle(word)"
    >{{ word }}</div>
  </div>
</template>

<style scoped>
.words-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 12px; }
.word-item { background: #fff; border-radius: 6px; padding: 12px 0; text-align: center; font-size: 1.1rem; font-weight: 500; letter-spacing: 1px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); color: #111; border: 1px solid #eee; cursor: pointer; transition: background 0.2s, color 0.2s; }
.word-item.selected { background: #4f8cff; color: #fff; border-color: #4f8cff; }
</style> 